<template>
  <div style="padding: 10px">
    <!-- 头部 -->
    <div class="headerBoxList">
      <span style="margin-left: 10px">手机操作日志</span>
    </div>

    <!-- 内容 -->
    <div class="contentBoxYY">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <!-- 24小时内操作记录 -->
        <el-tab-pane label="24小时内操作记录" name="first">
          <!-- 搜索栏 + 时间过滤 -->
          <div style="margin-bottom: 10px; display: flex; align-items: center; flex-wrap: wrap;">
            <el-date-picker
              v-model="queryForm.timeRange"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              value-format="timestamp"
              :default-time="['00:00:00', '23:59:59']"
              unlink-panels
              style="width: 380px; margin-right: 10px;"
            />
            <el-input
              placeholder="输入包名搜索"
              v-model="package"
              clearable
              @clear="handleSearch"
              @keyup.enter.native="handleSearch"
              style="width: 250px; margin-right: 10px"
            />
            <el-button type="primary" size="small" @click="handleSearch">查询</el-button>
            <el-button size="small" @click="onReset" style="margin-left: 8px;">重置</el-button>
          </div>

          <!-- 折叠面板 -->
          <el-collapse v-model="activity" accordion>
            <el-collapse-item title="时间线" name="1">
              <div class="timeline-wrapper" ref="timelineScroll">
                <div v-for="(item, index) in tableData" :key="index" class="timeline-item">
                  <div class="timeline-dot" :style="{ background: getDotColor(index) }">
                    <i class="el-icon-time"></i>
                  </div>
                  <div
                    v-if="index < tableData.length - 1"
                    class="timeline-line"
                    :style="{ background: getLineColor(index) }"
                  ></div>
                  <div class="timeline-content-box">
                    <div class="timeline-header">
                      <span class="timeline-step">STEP {{ index + 1 }}</span>
                      <span class="timeline-date">{{ formatDate(item.timestamp) }}</span>
                    </div>
                    <div class="timeline-card">
                      <div class="timeline-title">
                        <i class="el-icon-document timeline-icon"></i>
                        {{ item.typeChinese || '操作内容' }}
                      </div>
                      <div class="timeline-body">
                        <div v-if="item.package !== 'android'">包名：{{ item.package }}</div>
                        <div v-if="item.packageName">应用名称：{{ item.packageName }}</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-collapse-item>

            <el-collapse-item title="列表详情" name="2">
              <el-table
                ref="HoursRef"
                :data="tableData"
                border
                height="50vh"
                style="width: 100%; margin-top: 10px;"
              >
                <el-table-column prop="timestamp" label="时间">
                  <template #default="scope">
                    <div>时间：{{ formatDate(scope.row.timestamp) }}</div>
                    <div v-if="scope.row.package !== 'android'">包名：{{ scope.row.package }}</div>
                    <div>名称：{{ scope.row.typeChinese }}</div>
                  </template>
                </el-table-column>
              </el-table>
            </el-collapse-item>
          </el-collapse>

          <!-- 分页器 -->
          <div style="text-align: right; margin-top: 10px;">
            <el-pagination
              background
              layout="total,prev,next,jumper"
              :page-size="limit"
              :current-page="offset"
              :total="totalCount"
              @size-change="handleSizeChange"
              @current-change="handlePageChange"
            />
          </div>
        </el-tab-pane>

        <!-- 手机操作记录 -->
        <el-tab-pane label="手机操作记录" name="second">
          <!-- 搜索栏 + 时间过滤 -->
          <div style="margin-bottom: 10px; display: flex; align-items: center; flex-wrap: wrap;">
            <el-date-picker
              v-model="queryForm.timeRange"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              value-format="timestamp"
              :default-time="['00:00:00', '23:59:59']"
              unlink-panels
              style="width: 380px; margin-right: 10px;"
            />
            <el-input
              placeholder="输入包名搜索"
              v-model="package"
              clearable
              @clear="handleSearch"
              @keyup.enter.native="handleSearch"
              style="width: 250px; margin-right: 10px"
            />
            <el-button type="primary" size="small" @click="handleSearch">查询</el-button>
            <el-button size="small" @click="onReset" style="margin-left: 8px;">重置</el-button>
          </div>

          <el-table ref="PhoneRef" :data="tableData" border height="62vh" style="width: 100%;">
            <el-table-column prop="timestamp" label="操作详情">
              <template #default="scope">
                <div>包名：{{ scope.row.package }}</div>
                <div>应用名称：{{ scope.row.packageName || '未知' }}</div>
                <div>应用启动次数：{{ scope.row.appLaunchCount }}</div>
                <div>最后使用时间：{{ formatTime(scope.row.lastTimeUsed) }}</div>
                <div>最后可见时间：{{ formatTime(scope.row.lastTimeVisible) }}</div>
                <div>最后组件使用时间：{{ formatTime(scope.row.lastTimeComponentUsed) }}</div>
                <div>最后前台使用时间：{{ formatTime(scope.row.lastTimeFS) }}</div>
                <div>总使用时间：{{ scope.row.totalTimeUsed }}</div>
                <div>总可见时间：{{ scope.row.totalTimeVisible }}</div>
                <div>总前台时间：{{ scope.row.totalTimeFS }}</div>
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页器 -->
          <div style="text-align: right; margin-top: 10px;">
            <el-pagination
              background
              layout="total,prev,next,jumper"
              :page-size="limit"
              :current-page="offset"
              :total="totalCount"
              @size-change="handleSizeChange"
              @current-change="handlePageChange"
            />
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import { get24HoursApi, openPhoneApi } from "@/api/phoneInfo/index";

export default {
  name: "phoneAppEvent2",
  props: ["sendData"],
  data() {
    return {
      activeName: "first",
      activity: "1",
      tableData: [],
      offset: 1,
      limit: 20,
      package: "",
      totalCount: 0,
      queryForm: {
        timeRange: []
      }
    };
  },
  mounted() {
    this.initFunction();
  },
  watch: {
    "$store.state.account.basePhone2": function () {
      this.initFunction();
    },
    activeName() {
      this.offset = 1;
      this.initFunction();
    }
  },
  methods: {
    formatTime(ts) {
      if (!ts || ts === 0) return "无";
      return new Date(ts).toLocaleString();
    },
    formatDate(ts) {
      return new Date(ts).toLocaleString();
    },
    handleClick(tab, event) {
      console.log("切tab", tab, event);
    },
    handleSearch() {
      this.offset = 1;
      this.initFunction();
    },
    onReset() {
      this.queryForm.timeRange = [];
      this.package = "";
      this.offset = 1;
      this.initFunction();
    },
    handlePageChange(page) {
      this.offset = page;
      this.initFunction();
    },
    handleSizeChange(size) {
      this.limit = size;
      this.offset = 1;
      this.initFunction();
    },
    getDotColor(i) {
      const colors = ["#00bcd4", "#67c23a", "#e6a23c", "#f56c6c", "#8e44ad"];
      return colors[i % colors.length];
    },
    getLineColor(i) {
      const next = (i + 1) % 5;
      return `linear-gradient(to bottom, ${this.getDotColor(i)}, ${this.getDotColor(next)})`;
    },
    initFunction() {
      const data = {
        proof_num: this.sendData.proof_num,
        offset: this.offset,
        limit: this.limit,
        package: this.package,
        starttime: this.queryForm.timeRange?.[0]/1000,
        endtime: this.queryForm.timeRange?.[1]/1000,
      };

      // ✅ 若为空则删除
      if (!data.starttime || !data.endtime) {
        delete data.starttime;
        delete data.endtime;
      }

      const apiFunc = this.activeName === "first" ? get24HoursApi : openPhoneApi;

      apiFunc(data).then((res) => {
        this.tableData = res.data.list || res.data;
        this.totalCount =
          res.data.total || (res.data.length > 0 ? res.data[0].cnt : 0);
      });

      this.$nextTick(() => {
        const tableBody =
          this.activeName === "first"
            ? this.$refs.HoursRef?.bodyWrapper
            : this.$refs.PhoneRef?.bodyWrapper;
        if (tableBody) tableBody.scrollTop = 0;
        if (this.$refs.timelineScroll) this.$refs.timelineScroll.scrollTop = 0;
      });
    }
  }
};
</script>


<style scoped>
.headerBoxList {
  width: 100%;
  height: 50px;
  border-bottom: 1px solid #d2d2d2;
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: bold;
}
.contentBoxYY {
  width: 95%;
  margin: 0 auto;
  height: 87vh;
  overflow-y: auto;
  overflow-x: hidden;
  overflow-wrap: break-word;
}

/* 时间轴样式 */
.timeline-wrapper {
  position: relative;
  padding: 20px 40px;
  background: linear-gradient(180deg, #f8f9fb 0%, #eef1f5 100%);
  border-radius: 16px;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.05);
  overflow-y: auto;
  height: 50vh;
  margin-bottom: 15px;
}
.timeline-item {
  position: relative;
  padding-left: 30px;
  margin-bottom: 20px;
  display: flex;
  align-items: flex-start;
}
.timeline-dot {
  position: absolute;
  left: 0;
  top: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(64, 158, 255, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 12px;
  z-index: 2;
  transition: transform 0.3s, box-shadow 0.3s;
}
.timeline-dot:hover {
  transform: scale(1.3);
  box-shadow: 0 0 20px rgba(64, 158, 255, 0.8);
}
.timeline-line {
  position: absolute;
  left: 10px;
  top: 22px;
  width: 2px;
  height: calc(100% - 22px);
  opacity: 0.8;
}
.timeline-content-box {
  background: transparent;
  position: relative;
  width: 100%;
}
.timeline-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
  color: #606266;
  font-size: 13px;
}
.timeline-step {
  color: #409EFF;
  font-weight: bold;
}
.timeline-date {
  font-style: italic;
}
.timeline-card {
  background: #fff;
  border-radius: 12px;
  padding: 5px 5px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  border-left: 4px solid #409EFF;
  width: 220px;
}
.timeline-title {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 6px;
  color: #303133;
}
.timeline-icon {
  color: #409EFF;
  margin-right: 6px;
}
.timeline-body {
  font-size: 13px;
  line-height: 1.4;
  color: #606266;
  word-break: break-word;
  white-space: normal;
}
</style>
